<template>
  <div class="home">
    <mt-header title="不良品审批" fixed>
      <mt-button @click="close()" slot="left" icon="back">关闭</mt-button>
      <!-- <mt-button @click="goPlat()" slot="right" >移动报表</mt-button> -->
    </mt-header>
    <mt-navbar v-model="selected" v-show="notShowPlat">
      <mt-tab-item class="needToDo" id="2">
        <div>待审批
          <span v-if="selected == '2'">{{pagination.rowCount}}</span>
        </div>
      </mt-tab-item>
      <mt-tab-item id="1">已审批</mt-tab-item>
     
    </mt-navbar>
    <div class="search" v-show="notShowPlat">
      <div>
        <i class="mintui mintui-search"></i>
        <input type="text" v-model="woId">
        <mt-button type="primary" @click="findParams({})">查询</mt-button>
      </div>
    </div>
    
    <mt-loadmore :top-method="loadTop" :bottomMethod="loadBottom" :auto-fill="false" ref="loadmore" v-show="notShowPlat" >
      <mt-tab-container swipeable class="divBody" v-model="selected">
        <mt-tab-container-item id="2">
          <mt-cell v-for="(e,i) in agencyList" :key="i">
            <div>
              <div @click="gotoAbout(e)">
                <div class="cellDesc">
                  <span>{{e.woId}}</span>
                  <date :datelong="e.checkTime"></date>
                </div>
                <div class="divTitle divTitles">
                  <div>
                    <span>产品大类:</span>
                    <span>{{e.productTypeName}}</span>
                  </div>
                  <div> 
                    <span>产业:</span>
                    <span>{{e.cyName}}</span>
                  </div>
                </div>
               
                <div class="divTitle">
                  <span>网点名称:</span>
                  <span>{{e.netName}}</span>
                </div>
                <div class="divTitle">
                  <span>呈报描述:</span>
                  <span>{{e.reportNotes}}</span>
                </div>

                <div class="divTitle">
                  <span>审核结果:</span>
                  <!--  Y_1:副总审核通过    N_1：副总审核不通过 	Y_2：顾服审批通过    N_2：顾服审批不 -->
                  <span v-text="e.reportStatus == 'Y_1' ? '副总审核通过' : e.reportStatus =='N_1' ? '副总审核不通过': e.reportStatus =='Y_2' ? '顾服审批通过' : e.reportStatus =='N_2'? '顾服审批不' : '待审核' "></span>
                </div>
              </div>
            </div>
          </mt-cell>
        </mt-tab-container-item>

        <mt-tab-container-item id="1">
          <mt-cell v-for="(e,i) in agencyList" :key="i">
            <div>
               <div @click="gotoAbout(e)">
                <div class="cellDesc">
                  <span>{{e.woId}}</span>
                  <date :datelong="e.checkTime"></date>
                </div>
                <div class="divTitle divTitles">
                  <div>
                    <span>产品大类:</span>
                    <span>{{e.productTypeName}}</span>
                  </div>
                  <div> 
                    <span>产业:</span>
                    <span>{{e.cyName}}</span>
                  </div>
                </div>
               
                <div class="divTitle">
                  <span>网点名称:</span>
                  <span>{{e.netName}}</span>
                </div>
                <div class="divTitle">
                  <span>呈报描述:</span>
                  <span>{{e.reportNotes}}</span>
                </div>

                <div class="divTitle">
                  <span>审核结果:</span>
                  <!--  Y_1:副总审核通过    N_1：副总审核不通过 	Y_2：顾服审批通过    N_2：顾服审批不 -->
                  <span v-text="e.reportStatus == 'Y_1' ? '副总审核通过' : e.reportStatus =='N_1' ? '副总审核不通过': e.reportStatus =='Y_2' ? '顾服审批通过' : e.reportStatus =='N_2'? '顾服审批不' : '待审核' "></span>
                </div>
              </div>
            </div>
          </mt-cell>
        </mt-tab-container-item>
        
      </mt-tab-container>
    </mt-loadmore>
    <loading v-show="showLoading"></loading>
  </div>
</template>

<script>
// @ is an alias to /src
import loading from "@/components/loading.vue";
import date from "@/components/date.vue";
export default {
  name: "home",
  components: {
    loading,
    date
  }, //组件引入
  data() {
    //数据存储
    return {
      showLoading: false,
      selected: "2",
      woId:null,
      allLoaded: true,
      agencyList: [],
      pagination: {
        currentPage: "1",
        rowCount: 0
      },
      platInData:{},
      notShowPlat: true,
      platSelect:'gm',
    };
  },
  methods: {
    //用来定义方法
    loadTop() {
      //下拉刷新数据
      this.pagination.currentPage = "1";
      this._https({
        url: "/api/externalapi/hsi/baseInfoAPI/queryList",
        method: "post",
        data: {
          reportStatus: this.selected == '1' ? "Y_1" : '',
          currentPage: "1",
          pageSize: "10",
          userCode: this.$store.state.userInfo.userName,
          woId:this.woId,
          ...this.$store.state.levelData
        }
      }).then(
        res => {
          if (res.data.isSuccess) {
            this.agencyList = res.data.data.data;
            this.pagination.currentPage = res.data.data.pageInfo.currentPage;
            this.pagination.rowCount = res.data.data.totalNum;
          } else {
            alert(res.data.error);
          }
          this.$refs.loadmore.onTopLoaded();
        },
        err => {
          alert(err);
          this.$refs.loadmore.onTopLoaded();
        }
      );
    },
    loadBottom() {
      //下拉加载数据
      this.pagination.currentPage = this.pagination.currentPage + 1;
      this._https({
        url: "/api/externalapi/hsi/baseInfoAPI/queryList",
        method: "post",
        data: {
          reportStatus: this.selected == '1' ? "Y_1" : '',
          currentPage: this.pagination.currentPage,
          pageSize: "10",
          userCode: this.$store.state.userInfo.userName,
          woId:this.woId,
          ...this.$store.state.levelData
        }
      }).then(
        res => {
          if (res.data.isSuccess) {
            this.agencyList = this.agencyList.concat(res.data.data.data);
            this.pagination.currentPage = res.data.data.pageInfo.currentPage;
            this.pagination.rowCount = res.data.data.totalNum;
          } else {
            alert(res.data.error);
          }
          this.$refs.loadmore.onBottomLoaded();
        },
        err => {
          alert(err);
           this.$refs.loadmore.onBottomLoaded();
        }
      );
    },
    gotoAbout(e) {
      //路由跳转
      this.$store.commit({
        type: "increment",
        getList: e
      });
      this.$router.push({ name: "about", params: { ...e,selected:this.selected } });
    },
    getList(e) {
      //加载数据
      this.showLoading = true;
      this._https({
        url: "/api/externalapi/hsi/baseInfoAPI/queryList",
        method: "post",
        data: {
          reportStatus: e == '1' ? "Y_1" : '',
          currentPage: this.pagination.currentPage,
          pageSize: "10",
          userCode: this.$store.state.userInfo.userName,
          
        }
      }).then(
        res => {
          this.showLoading = false;
          if (res.data.isSuccess) {
            this.agencyList = res.data.data.data;
            this.pagination.currentPage = res.data.data.pageInfo.currentPage;
            this.pagination.rowCount = res.data.data.totalNum;
          } else {
            this.showLoading = false;
            alert(res.data.error);
          }
        },
        err => {
          this.showLoading = false;
          alert(err);
        }
      );
    },
    findParams(e){
      let _this = this;
      this.showLoading = true;
      this.pagination.currentPage = '1';
      this._https({
      url: "/api/externalapi/hsi/baseInfoAPI/queryList",
      method: "post",
      data: {
        reportStatus: e == '1' ? "Y_1" : '',
        currentPage: this.pagination.currentPage,
        pageSize: "10",
        userCode: e.userName || this.$store.state.userInfo.userName,
       // woId:this.woId,
        ...this.$store.state.levelData
      }
    }).then(
      res => {
        if (res.data.isSuccess) {
          _this.showLoading = false;
          _this.agencyList = res.data.data.data;
          _this.pagination.currentPage = res.data.data.pageInfo.currentPage;
          _this.pagination.rowCount = res.data.data.totalNum;
        } else {
          _this.showLoading = false;
          alert(res.data.error);
        }
      },
      err => {
        _this.showLoading = false;
        alert(err);
      }
    );
    },
    close:function(){
        XuntongJSBridge.call('close');
    },
    goPlat:function(){
      this.$router.push({ name: "plat"});
    }
  },
  watch: {
    selected: function(val, oldVal) {
      //tab页切换
      this.pagination.currentPage = 1;
      this.agencyList = [];
      this.woId = '';
      this.getList(val);
    },
    
  },
  created: function() {
    //初始化页面
    let _this = this
    // XuntongJSBridge.call('setWebViewTitleBar',{'isShow':false});
    // XuntongJSBridge.call("getPersonInfo", {}, function(result) { 
     const result={
        data:{
          //userName:'17711111111'
          userName:'00061168'
          //userName:'00000180'
        }
      };
      _this.$store.commit({
        type: "changeCode",
        userInfo: result.data
      });
       _this.findParams(result.data)
    //   _this._https({
    //   url: "/api/relationInfo/queryUserLevel",
    //   method: "post",
    //   data: {
    //     userCode: result.data.userName,
    //   }
    // }).then(
    //   res => {
    //     _this.$store.commit({
    //       type: "holdlevel",
    //       data: res.data.data
    //     });
    //     if (res.data.isSuccess) {
    //       _this.findParams(result.data)
    //      //
    //     } else {
    //       alert(res.data.error);
    //       XuntongJSBridge.call('close');
    //     }
    //   },
    //   err => {
    //     alert(err);
    //   } 
    // );
    //});
    
  } 
};
</script>

<style lang="scss">
.home {
  height: 100%;
  background: #eee;
  .mint-navbar{
    margin-top: 40px;
  }
  .divBody {
    background: #eee;
    color: blue;
    min-height: calc(100vh - #{100px});
  }
  .mint-cell {
    background: #eeeeee;
    text-align: left;
    .mint-cell-wrapper {
      margin-bottom: 10px;
      background: #26a2ffc7;
      padding: 0px;
      background: #fff;
      line-height: 1.5;
      font-size: 12px;
      border: 1px solid #dee4de;
      border-left: 0px;
      border-right: 0px;
      span {
        color: #888;
      }
    }
    .mint-cell-value {
      width: 100%;
      margin-bottom: 10px;
      & > div {
        width: 100%;
      }
    }
    .cellDesc {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #dee4de;
      text-align: right;
      margin-bottom: 5px;
      span {
        padding: 5px;
        line-height: 1.5;
        color: #333;
        display: inline-block;
        width: 100%;
        &:first-child {
          text-align: left;
          border-right: 1px solid #dee4de;
        }
      }
    }
    .cellBottom {
      border-top: 1px solid #dee4de;

      padding: 5px;
      line-height: 1.5;
      text-align: center;
      color: #26a2ff;
    }
    .divTitle {
      padding-left: 5px;
      span {
        display: inline-block;
        width: 20%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #26a2ff;
        &:last-child {
          width: 79%;
          color: #888;
        }
      }
    }
    .divTitles {
      display: flex;
      div{
        width:100%;
      }
      span {
        display: inline-block;
        width: 40%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #26a2ff;
        &:last-child {
          width: 59%;
          color: #888;
        }
      }
    }
    .RightDate {
      text-align: right;
      color: #888;
      font-size: 12px;
    }
  }

  .needToDo {
    position: relative;
    top: 0px;
    span {
      position: absolute;
      top: 3px;
      border-radius: 50%;
      background: red;
      color: white;
      padding: 2px 4px;
    }
  }
  .search {
    background: #eee;
    padding: 4px;
    div {
      display: flex;
      height: 30px;
      background: white;
      margin: 4px;
      border-radius: 15px;
    }
    i {
      line-height: 30px;
    }
    input {
      display: inline-block;
      width: 100%;
    }
    button {
      font-size: 12px;
      width: 60px;
      height: 30px;
      border-radius: 15px;
    }
  }

  .showPlat{
    height: 100%;
    background: white;
   .mint-cell{
     background: white;
     .mint-cell-wrapper{
       border: none;
       margin-top: 20px;
       &>.mint-cell-value>div{
         display: flex;
         .divTitle{
           padding: 10px;
          text-align: center;
          font-size: 16px;
          width: 100%;
          & div:first-child{
            color: #26a2ff;
          }
       }
       }
       
     }
   }
  }

  .mint-cell-value{
    table{
      width: 93.5%;
      margin: 10px 3%;
      text-align: center;
      border-color:rgba(38, 162, 255, 0.51);;
      thead{
        td{
          color:#26a2ff;
        }
        
      }
    }
  }
}
</style>


